<template>
	<div>
		<div id="map" style="width: 100%;height: 100%;"></div>
	</div>
</template>

<script>
let map = null;
export default {
	name: "Map",
	// maker点击事件
	emits: ['clickMaker', 'contextmenu'],
	props: {
		// 地图展示数据
		pageList: {
			type: Array,
			default: () => []
		},
		// 当前选中的maker数据
		clickItem: {
			type: Object,
			default: () => { }
		}
	},
	data() {
		return {
			// 地图展示的所有数据
			radioListMap: [],
			// 地图中的图标
			markerMap: {},
		};
	},
	watch: {
		pageList(value) {
			this.changList(value);
		}
	},
	mounted() {
		// 使用this.$nextTick确保DOM元素已经渲染完毕
		this.$nextTick(() => {
			// 创建地图实例
			map = new maptalks.Map('map', {
				center: [123.546178, 32.728374],
				zoom: 5, minZoom: 4.5, maxZoom: 19, dragRotate: false,
				baseLayer: new maptalks.TileLayer('base', {
					urlTemplate: 'https://gss{s}.bdstatic.com/8bo_dTSlRsgBo1vgoIiO_jowehsv/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20170927',
					subdomains: [0, 1, 2],
					spatialReference: { projection: 'baidu' }
				}),
				layers: [
					new maptalks.VectorLayer('pointVg'),
				]
			});
			// map.on('zoomend', function (par) {
			// 	console.log("级别：", par)
			// })
			// map.on('click', function (e) {
			// 	console.log("点击了：", e)
			// })
			// 限制显示区域
			var extent = { xmax: 180, xmin: -180, ymax: 75, ymin: -75, };
			map.setMaxExtent(extent);
		});
	},
	methods: {
		// 列表更新变化事件
		changList(list) {
			if (!list) return;
			let str1 = JSON.stringify(list);
			let str2 = JSON.stringify(this.radioListMap);
			if (str1 == str2) return;
			this.radioListMap = list;
			this.listToMap();
		},
		// 将列表数据渲染到地图上
		listToMap() {
			let list = this.radioListMap;
			for (const key in this.markerMap) {
				this.markerMap[key].remove();
				this.markerMap[key] = null;
			}
			for (let i = 0; i < list.length; i++) {
				const row = list[i]
				const maker = this.makerToMap(row);
				if (maker) {
					// 将添加到地图上的maker保存到markerMap中
					this.markerMap[list[i].radioStationCode] = maker;
				}
			}
		},
		// 变更所有maker的状态
		showMaker(list) {
			for (let key in this.markerMap) {
				// 选中
				if (list.includes(key)) {
					this.makerClickFun(this.markerMap[key], true);
				} else {
					// 未选中
					this.makerClickFun(this.markerMap[key], false);
				}
			}
		},
		// 变更maker选中或未选中状态
		makerClickFun(maker, checked) {
			// 在线被选中 on_line_be.png
			// 在线没有被选中 on_line_not.png
			// 离线被选中 off_line_be.png
			// 离线没有被选中 off_line_not.png
			let url = maker.getSymbol()[0].markerFile;
			let color = '#D95348'
			if (typeof checked != 'boolean') {
				if (url.indexOf("not") >= 0) {
					checked = true;
				} else {
					checked = false;
				}
				this.$emit('clickMaker', maker, checked)
			}
			if (checked) {
				url = url.replace("not", "be");
				color = '#D95348'
			} else {
				url = url.replace("be", "not");
				color = '#101C27'
			}
			maker.updateSymbol([{ markerFile: url }, { textFill: color }, { textFill: color }])
		},
		// 定位到指定位置
		moveItemToMap(item) {
			if (!item) return;
			map.animateTo({
				center: [item.x, item.y],
				zoom: 13,
				pitch: 0,
				bearing: 0
			}, {
				duration: 1000
			});
			// map.setCenter([item.x, item.y])
		},
		// 将数据渲染到地图上
		makerToMap(item) {
			// status: 0正常 1异常 2离线,
			// 在线被选中 on_line_be.png
			// 在线没有被选中 on_line_not.png
			// 离线 off_line.png
			// 行业电台 guild.png
			let name = item.radioStationName;
			let code = item.radioStationCode;
			if (name && name.length) {
				if (name.length > 5) {
					name = name.slice(0, 5) + "..."
				}
			}
			if (code && code.length) {
				if (code.length > 5) {
					code = code.slice(0, 5) + "..."
				}
			}
			let style = {
				// 图标
				img: '../image/off_line.png',
				// id、名称颜色
				color: '#101C27',
				// 传输状态颜色
				carryColor: 'rgba(0,0,0,0.45)',
				// 实时状态颜色
				statusColor: 'rgba(255,255,255,0.65)'
			}
			if (item.status == '0') {
				style.img = '../image/on_line_not.png';
				style.statusColor = 'rgba(0,0,0,0.65)'
			} else {
				style.img = '../image/off_line.png';
				style.statusColor = '#FFFFFF'
			}
			// 如果是行业电台
			if (item.guild) {
				style.img = '../image/guild.png';
				style.color = '#FFFFFF'
				style.statusColor = '#FFFFFF'
			}
			if (this.markerMap[item.radioStationCode]) {
				// 删除原有标记
				this.markerMap[item.radioStationCode].remove()
				// 更新原有标记的属性
				// this.markerMap[item.id].properties = item;
				// return this.markerMap[item.id];
				// // 通过id获取标记
				// map.getLayer("pointVg").getGeometryById(item.id)
			}
			let maker = null
			try {
				maker = new maptalks.Marker(
					[item.x, item.y], {
					// 将自定义内容指定给标记的content选项
					id: item.radioStationCode,
					properties: item,
					symbol: [
						{
							markerFile: style.img,
							markerWidth: 125,
							markerHeight: 185,
							markerDx: 0,
							markerDy: 130,
							markerOpacity: 1,
						},
						{
							textFaceName: 'sans-serif',
							textName: code,
							textDx: -2,
							textDy: 25,
							textSize: 12,
							textFill: style.color,
						},
						{
							textFaceName: 'sans-serif',
							textName: name,
							textSize: 14,
							textDx: 0,
							textDy: 49,
							textFill: style.color,
						},
						{
							textFaceName: 'sans-serif',
							textName: '暂无~',
							textSize: 14,
							textDx: 0,
							textDy: 74,
							textFill: style.carryColor,
						},
						{
							textFaceName: 'sans-serif',
							textName: '暂无~',
							textSize: 14,
							textDx: 0,
							textDy: 95,
							textFill: style.statusColor,
						},
					]
				}).addTo(map.getLayer("pointVg"));
			} catch (e) {
				console.log("地图还没有加载完成。。。")
			}

			if (item.status == '0' && !item.guild) {
				maker.on('click', () => {
					// 设置图标为选中或被选中状态
					this.makerClickFun(maker, item);
					console.log("数据：", item)
				})
				maker.on('contextmenu', () => {
					// 设置图标为选中或被选中状态
					this.$emit('rightClick', item, true)
				})
			}
			return maker;
		}
	},
};
</script>

<style scoped>
.custom-marker {
	color: red;
}
</style>